<template>
    <div>
        <!--        <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"/>-->
        <van-row class="toolbar" type="flex" justify="space-around">
            <van-col span="24" v-show="readOnly">
                <van-button size="mini" type="primary" @click="checkAll">{{ checkText }}</van-button>
                <van-button size="mini" type="default" @click="onSell">上架</van-button>
                <van-button size="mini" type="danger" @click="onDel">删除</van-button>
                <van-button style="margin-left: 150px" size="mini" type="info" @click="edit">编辑</van-button>
            </van-col>

            <van-col span="24" gutter="100" v-show="!readOnly">
                <van-button style="margin-left: 280px" size="mini" type="info" @click="submit">确定</van-button>
                <van-button size="mini" type="primary" @click="cancel">取消</van-button>
            </van-col>
        </van-row>
        <van-checkbox-group v-model="goodsCheckList" ref="checkboxGroup">
            <van-row>
                <van-col span="24" v-for="item in goodsList" :key="item.id">
                    <van-card
                        :num="item.num"
                        :price="item.price"
                        :desc="item.desc"
                        :title="item.name"
                        currency="¥"
                        :tag="switchStatus(item)"
                        :thumb="fixUrl(item.img)">

                        <template #price>
                            <van-field v-model="item.price" :readonly="readOnly" v-show="!readOnly"
                                       style="width: 70px"></van-field>
                            <div v-show="readOnly">
                                <span class="van-card__price">¥</span>
                                <span class="van-card__price-integer">{{ item.price }}</span>
                            </div>
                        </template>

                        <template #num>
                            <van-stepper :disabled="readOnly" v-model="item.num"/>
                        </template>
                        <template #footer>
                            <van-checkbox :name="item.id" :id="item.id"></van-checkbox>
                        </template>
                    </van-card>
                </van-col>
            </van-row>
        </van-checkbox-group>
    </div>
</template>

<script>


import {listGoods, goodsUpdate, listDelete, listSell} from "@/api/goods";

export default {
    name: "goods",
    created() {
        this.updateGoodsList();
    },
    computed: {},
    data() {
        return {
            value: '',
            goodsNum: 0,
            goodsList: [
                {id: 0, num: 1, status: 0, price: 666},
                {id: 1, num: 2, status: 1},
                {id: 2, num: 3, status: 2}
            ],
            readOnly: true,
            check: false,
            goodsCheckList: [],
            checkText: "全选"
        };
    },
    methods: {

        onSearch(val) {
            this.$toast(val)
        },
        onCancel() {
            this.$data.value = ""
        },
        switchStatus(item) {
            if (item.num < 1) {
                item.status = 2
            }
            switch (item.status) {
                case 0:
                    return "未上架";
                case 1:
                    return "在售";
                case 2:
                    return "售罄";
                default:
                    return;
            }
        },
        onSell(id) {
            this.$toast(`${id} is on sell`)
            console.log(this.$data.goodsCheckList)
            listSell(this.$data.goodsCheckList).then((res) => {
                this.utils.resultEnd(res.state, "上架")
            })
            this.updateGoodsList();
        },
        onDel(id) {
            this.$toast(`${id} is deleted`)
            console.log(this.$data.goodsCheckList)
            listDelete(this.$data.goodsCheckList).then(res => {
                this.utils.resultEnd(res.state, "删除")
            })
            this.updateGoodsList();
        },
        async submit() {
            this.readOnly = !this.readOnly
            this.$toast(JSON.stringify(this.goodsList))
            await goodsUpdate(this.goodsList)
            await this.updateGoodsList();
        },
        cancel() {
            this.readOnly = !this.readOnly
            this.updateGoodsList();
        },
        async updateGoodsList() {
            let result = await listGoods();
            if (result.state) {
                this.$data.goodsList = result.data
            } else {
                this.$toast(`获取商品列表失败!`)
            }
        },
        edit() {
            this.$data.readOnly = false
        },
        checkAll() {
            let check = !this.$data.check;
            this.$data.check = check
            let text = "全选"
            if (check) {
                text = "反选"
            }
            this.$data.checkText = text
            this.$refs.checkboxGroup.toggleAll(check);
        },
        fixUrl(url) {
            return this.utils.fixUrl(url)
        }
    }
}
</script>

<style lang="scss" scoped>
.toolbar {
    margin: auto;
    padding: 5px;

    .van-button {
        margin-left: 20px;
    }
}


</style>
